﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post" action="/" enctype="multipart/form-data">
        <h1>注册</h1>
        <label>邀请人：（* 必填，</label><a href="../User/Inviter.html">没有邀请人</a>）<br />
        <input size="40" type="text" name="inviter" value="">
        <br />
        <label>邀请码：（* 必填）</label><br />
        <input size="40" type="text" name="invitercode" value="">
        <br />
        <label>用户名:（* 必填）</label><br />
        <input size="40" type="text" name="username" value="" id="username">
        <div style="color:red; display:none;" id="repetition">用户名重复</div>
        <br />
        <label>密码：（* 必填）</label><br />
        <input size="40" type="password" name="password" value="" id="password" />
        <div style="display:none" class="pwd-short">密码的长度不能小于4</div>
        <br />
        <label>验证密码：（* 必填）</label><br />
        <input size="40" type="password" name="password" value="" />
        <br />
        <label>验证码：（* 必填）</label><br />
        <input type="text" name="vcode" value="" />
        <div style="display:none" class="pwd-no">密码和确认密码必须一致</div>
        点击输入框显示
        <img src="/images/GetImageCode.jpg" /><br />
        <input type="submit" value="提交" id="submit">
        <input type="reset" value="重置">
    </form>
    <script>
        //参考用户注册页面，显示错误提示：
        //密码的长度不能小于4
        //密码和确认密码必须一致

        if (document.getElementsByName('password')[0].value.length < 4) {
            document.getElementsByClassName('pwd-short')[0].style = "display:flow"
        }
        if (document.getElementsByName('password')[0].value != document.getElementsByName('password')[1].value) {
            document.getElementsByClassName('pwd-no')[0].style = "display:flow"
        }
        //参考注册页面：
        //    提交时，如果用户名重复（已有用户名用数组保存），阻止form提交，提示“用户名重复”。
        //    重新输入用户名，一旦输入用户名部分没有重复，“用户名重复”的提示消失
        //    当用户名或密码等有值时，关闭页面前弹出确认框
        var username = ["fg", "ls"]

        document.getElementsByTagName('form')[0].onsubmit = function (event) {

            if (username.indexOf(document.getElementById('username').value) > 0) {
                document.getElementById('repetition').classList.add("showTitle");
                event.preventDefault();
            } else {
                document.getElementById('repetition').classList.remove("showTitle");
            }

        };

        window.onbeforeunload = function (event) {
            if (document.getElementsByName('username')[0].value.length > 0 || document.getElementsByName('password')[0].value.length > 0) {
                return '关闭提示';
            }
        };




    </script>
    <style>
        .showTitle {
            display: block !important;
        }
    </style>
</body>
</html>